<!-- 
  过滤器
    PS: Vue3 中直接移除了这个东西
    
    用处：主要做文本的格式化操作，比如：
        'abcd'  => 'Abcd'
        时间戳   => YYYY-MM-DD HH:mm:ss
        1000    => $1000
        1000    => ￥1000
        1000    => 1,000
    
  注册过滤器
    1. 全局过滤器
      Vue.filter(name, format)
        name -  过滤器的名字
        format - 过滤器的格式化函数
    2. 局部过滤器
      使用 filters 选项来注册：
      {
        filters: {
          name1: format1,
          name2: format2
        }
      }

  使用过滤器
    通过管道符号（|）来使用，可以应用在
      1. 插值表达式 {{ msg | xx过滤器 }}
      2. v-bind指令表达式上   v-bind:title="msg | xx过滤器"

  过滤器函数还可以接受更多的参数
      {{ msg | xx过滤器('a', 'b') }}
 -->

<template>
  <div>
    <h1>{{ msg | capitalize("a", "b") }}</h1>
    <p>{{ foo | capitalize }}</p>
    <p>{{ time | formateDate }}</p>

    <p>{{ time | formateDate("YYYY-MM-DD") }}</p>

    <p>{{ formateDateFn(time) }}</p>
  </div>
</template>

<script>
import dayjs from "dayjs";

export default {
  // 注册局部过滤器
  filters: {
    capitalize(value, p1, p2) {
      console.log(value, p1, p2);
      if (!value) return "";
      value = value.toString();
      return value.charAt(0).toUpperCase() + value.slice(1);
    },

    formateDate(value, formatStr = "YYYY-MM-DD HH:mm:ss") {
      return dayjs(value).format(formatStr);
    },
  },

  data() {
    return {
      msg: "hello",
      foo: "world",
      time: 1684416659290,
    };
  },

  methods: {
    formateDateFn(value, formatStr = "YYYY-MM-DD HH:mm:ss") {
      return dayjs(value).format(formatStr);
    },
  },
};
</script>

<style>
@import "./global.css";
</style>
